<template>
  <el-dialog v-model="dialogVisible" :title="title" width="60%" :before-close="handleClose">
    <div>
      <el-form class="tab9-dialog" ref="ruleFormRef" :model="ruleForm" :rules="rules" inline>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="">
            <template #label>
              <span style="color: red;">*</span>
              商机名称
            </template>
            <el-form-item prop="oppo_name" style="width: 100%">
              <el-input v-model="ruleForm.oppo_name" placeholder="商机名称" />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="所属客户">
            {{ dataInfo.name }}
          </el-descriptions-item>
          <el-descriptions-item label="所在地区">
            <el-form-item style="width: 100%">
              <el-cascader clearable filterable style="width: 100%" v-model="ruleForm.address" :options="areaTree" :props="{
                label: 'name',
                value: 'name',
                children: 'sub',
                expandTrigger: 'hover',
              }" />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="">
            <template #label>
              <span style="color: red;">*</span>
              预算金额(元)
            </template>
            <el-form-item prop="business_budget" style="width: 100%">
              <el-input v-model="ruleForm.business_budget" placeholder="预算金额" />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="规划时间">
            <el-form-item prop="plan_time" style="width: 100%">
              <el-date-picker style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" v-model="ruleForm.plan_time"
                type="datetime" placeholder="规划时间" />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="招标时间">
            <el-form-item prop="bidding_time" style="width: 100%">
              <el-date-picker style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" v-model="ruleForm.bidding_time"
                type="datetime" placeholder="招标时间" />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="商机性质">
            <el-select style="width: 100%" placeholder="商机性质" v-model="ruleForm.business_nature" filterable clearable>
              <el-option label="漏斗内" value="漏斗内" />
              <el-option label="漏斗外" value="漏斗外" />
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item label="">
            <template #label>
              <span style="color: red;">*</span>
              商机进度
            </template>
            <el-form-item prop="project_stage" style="width: 100%">
              <el-select style="width: 100%" placeholder="商机进度" v-model="ruleForm.project_stage" filterable clearable>
                <el-option v-for="ele in scheduleOptions" :key="ele.id" :label="ele.name" :value="ele.name" />
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="项目把握度">
            <el-select style="width: 100%" placeholder="项目把握度" v-model="ruleForm.possibility" filterable clearable>
              <el-option v-for="ele in possibilityOptions" :key="ele.id" :label="ele.name" :value="ele.name" />
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item label="建设缘由">
            <el-form-item prop="business_cause" style="width: 100%">
              <el-input v-model="ruleForm.business_cause" placeholder="建设缘由" />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            <el-form-item prop="remark" style="width: 100%">
              <el-input v-model="ruleForm.remark" placeholder="备注" />
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="submit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { addApi } from "@/plugins/api/customer/manage/opportunity";
// 客户api
import { customerOptionsApi } from "@/plugins/api/shopping/user";
// 地区
import { listApi as areaApi } from "@/plugins/api/shopping/area";
// 字典查询
import { listApi as dictApi } from "@/plugins/api/system/dict";
const props = defineProps({
  dataInfo: {
    type: Object,
    default: {},
  },
});
let ruleForm = ref({});
let rules = {
  oppo_name: [{ required: true, message: "请输入商机名称", trigger: "blur" }],
  business_budget: [{ required: true, message: "预算金额", trigger: "blur" }],
  project_stage: [{ required: true, message: "商机进度", trigger: "change" }],
};
let dialogVisible = ref(false);
function handleClose(done) {
  ElMessageBox.confirm("是否确定关闭此对话框?")
    .then(() => {
      done();
    })
    .catch(() => { });
}
let title = ref("");
let ruleFormRef = ref(null);
function initFun(type, row) {
  console.log(row);
  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields();
  }
  customerOptions.value = [];
  areaTree.value = [];
  scheduleOptions.value = [];
  possibilityOptions.value = [];
  if (type == "add") {
    title.value = "新增";
    ruleForm.value = {};
  } else {
    title.value = "编辑";
    ruleForm.value = Object.assign({}, row);
    // 省市区
    ruleForm.value.address = [];
    if (row.province) {
      ruleForm.value.address.push(row.province);
    }
    if (row.city) {
      ruleForm.value.address.push(row.city);
    }
    if (row.area) {
      ruleForm.value.address.push(row.area);
    }
  }
  dialogVisible.value = true;
  getCustem();
  getArea();
  getSchedule();
  getPossibility();
}
const emit = defineEmits(["refreshList"]);
function submit() {
  if (!ruleFormRef.value) return;
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      let obj = { ...ruleForm.value };
      obj.customer_id = props.dataInfo.id;
      if (ruleForm.value.address && ruleForm.value.address.length > 0) {
        obj.province = obj.address[0];
        obj.city = obj.address[1];
        obj.area = obj.address[2];
      }
      addApi(obj).then((data) => {
        ElMessage.success("操作成功！");
        dialogVisible.value = false;
        emit("refreshList");
      });
    }
  });
}
function handleRadio(data) {
  if (data === 0) {
    ruleForm.value.valid_date = "";
  }
}
// 客户
let customerOptions = ref([]);
function getCustem() {
  customerOptionsApi().then((data) => {
    customerOptions.value = data;
  });
}
// 所在地区
let areaTree = ref([]);
function getArea() {
  areaApi({}).then((data) => {
    areaTree.value = data;
  });
}
// 商机进度
let scheduleOptions = ref([]);
function getSchedule() {
  getDictionary(7).then((res) => {
    scheduleOptions.value = res;
  });
}
// 项目把握度
let possibilityOptions = ref([]);
function getPossibility() {
  getDictionary(8).then((res) => {
    possibilityOptions.value = res;
  });
}
// 获取字典项
function getDictionary(dict_id) {
  return new Promise((resolve, reject) => {
    dictApi({ dict_id: dict_id }).then((data) => {
      resolve(data);
    });
  });
}
//
onMounted(() => { });
defineExpose({
  initFun,
});
</script>
<style scoped lang="scss">
.tab9-dialog {
  width: 100%;

  :deep(.el-form-item) {
    margin: 10px 0;
  }
}
</style>
